<template>
	<view class="_tbody">
		<!-- #ifdef H5 -->
		<view class="tou">
			<u-icon name="arrow-left" size="50" @click='onfanhui'></u-icon>
		</view>
		<!-- #endif -->
		<view class="healt_top">
			<view class="healt_top_title">基础代谢计算</view>
			<view class="healt_top_content">
				基础代谢就像我们身体里的“燃油机”，无时无刻不在燃烧能量，在健身减肥之前先了解一下自己的基础代谢吧!
			</view>


		</view>
		<view class="healt_bottom">
			<view class="healt_bottom_t">请输入您的身高、体重:</view>
			<view class="checkbox">
				<view class="gender">性别:</view>
				<u-radio-group v-model="valuegender" size="20px" @change="changeGender">
					<u-radio shape="circle" labelSize="18px" label="男" name="男"></u-radio>
					<u-radio shape="circle" labelSize="18px" label="女" name="女"></u-radio>
				</u-radio-group>
			</view>
			<view class="input_wight">
				<view class="input_wight_height">
					身高
				</view>
				<u--input placeholder="请输入您的真实身高(cm)" border="surround" v-model="valInputH" @change="changeh">
				</u--input>
			</view>
			<view class="input_wight">
				<view class="input_wight_height">
					体重
				</view>
				<u--input placeholder="请输入您的真实体重(kg)" border="surround" v-model="valInputW" @change="changew">
				</u--input>
			</view>
			<view class="input_wight">
				<view class="input_wight_height">
					年龄
				</view>
				<u--input placeholder="请输入您的真实年龄(年)" border="surround" v-model="valInputA" @change="changeage">
				</u--input>
			</view>
			<u-button type="primary" color='linear-gradient( 120deg ,#00cccc,#33cc66 )' text="计算" @click="Oncount">
			</u-button>
		</view>

		<view class="hea_count" v-show="ShowCount">
			<view class="count_jieguo ">计算结果：</view>
			<view class="count_fanwei_flex">
				<view class="count_fanwei">您的基础代谢为：</view>
				<view class="count_fanwei_color">{{count}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选框值
				valuegender: '男',
				// 绑定输入的值 体重
				valInputW: '',
				// 绑定输入的值 身高 
				valInputH: '',
				// 预估的范围
				// 绑定输入的值 身高
				valInputA: '',
				count: '',
				ShowCount: false


			};
		},
		methods: {
			// 返回
			onfanhui() {
				uni.navigateBack()
			},
			// 更改选项后 判断男女 在根据输入的值 进行区间预估
			changeGender(a) {
				// console.log('改变了选项');
				// console.log(a);
				this.valuegender = a
				console.log(this.valuegender);
			},
			changew(valw) {
				// 拿到 输入的值 
				// 根据输入的值 判断 区间 
				console.log('change', valw);
				this.valInputW = valw
				if (this.valInputW == '') {
					this.ShowCount = false

				}
			},
			changeh(valh) {
				// 拿到 输入的值 
				// 根据输入的值 判断 区间 
				console.log('change', valh);
				this.valInputH = valh
				if (this.valInputH == '') {
					this.ShowCount = false
				}
			},
			changeage(age) {
				// 拿到 输入的值 
				// 根据输入的值 判断 区间 
				console.log('change', age);
				this.valInputA = age
				if (this.valInputA == '') {
					this.ShowCount = false
				}
			},
			Oncount() {
				if (this.valuegender == '男' && this.valInputW.trim() !== '' && this.valInputH.trim() !== '' && this
					.valInputA.trim() !== '') {
					this.count = 66 + (13.7 * this.valInputW) + (5.0 * this.valInputH) - (6.8 * this.valInputA)
					this.ShowCount = true
				} else if (this.valuegender == '女' && this.valInputW.trim() !== '' && this.valInputH.trim() !== '' && this
					.valInputA.trim() !== '') {
					this.count = 655 + (9.6 * this.valInputW) + (1.7 * this.valInputH) - (4.7 * this.valInputA)
					this.ShowCount = true
				}
			}
		},
	}
</script>

<style lang="scss">
	// ._tbody {
	// 	width: 100%;
	// 	height: 100%;
	// 	// background-color: #818181 !important;
	._tbody {
		background-color: #efefef;
	}

	.tou {
		width: 100%;
		height: 50px;
		background-color: white;
		display: flex;
	}

	.u-radio {
		margin-right: 25px;
	}

	.healt_top {
		height: 150px;
		background-color: #fff;
		padding: 20px 10px;
		margin-bottom: 10px;
	}

	// .healt_top_title {}

	.healt_top_content {
		text-indent: 2em;
		font-size: 14px;
		color: #a1a1a1;
		line-height: 30px;
		height: 30px;
		margin-top: 20px;
	}

	// .background-color: {}

	.healt_bottom {
		height: 230px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.healt_bottom_t {
		padding: 10px 10px;
	}

	.checkbox {
		display: flex;
		// justify-content: space-between;
	}

	.gender {
		margin: 10px 20px;
	}

	.input_wight {
		display: flex;
		// margin-bottom: 10px;
	}

	.input_wight_height {
		margin: 10px 20px;
	}

	.hea_count {
		margin-top: 25px;
		height: 100px;
		background-color: #fff;
	}

	.count_jieguo {
		padding: 10px;
	}

	.count_fanwei {
		padding: 10px;
		// font-size: 14px;

	}

	.count_fanwei_flex {
		display: flex;
		// justify-content: ;
	}

	.count_fanwei_color {
		padding: 10px;
		color: #33cc66;
	}
</style>
